import { useMemo, useState } from "react";
import { useCurtDownTime } from "./hooks/useCurtDownTime";

// HOC: 高阶组件
// 根据react的特性，逻辑复用的一种高级技巧
// 形式： 一个函数， 接收一个组件作为参数， 返回值又是一个组件， 这个时候我们将这个函数 叫做 高阶组件（HOC）

//  HOC 的作用： 1. 代码复用 2. 渲染劫持 3. 抽象状态
//  案例： 1. 路由守卫
//        2. 权限控制
//        3. 日志记录 
//        4. 性能追踪

// 自定义 hook ： useCurtDownTime
// useCurtDownTime(时间)

// {
//   start: 开始倒计时方法
//   onEnd: 倒计时结束， 该方法会自动执行
//   curtDownTime: "00D:00H:00M:00S"
// }



const App = () => {
  const [list, setList] = useState([1, 2, 3, 4, 5]);


  const sum = () => {
    console.log("sum函数执行了");
    return list.reduce((acc, curr) => acc + curr, 0);
  };

  // useDemo： 用于对于计算的结果的缓存， 结果是一个值
  //       第二个参数是一个依赖的数组， 当依赖项发生改变， 才会重新计算。 依赖项目不变， 直接读取上一次缓存的结果。
  const sum1 = useMemo(() => {
    console.log("sum1 useMemo 执行了");
    return  list.reduce((acc, curr) => acc + curr, 0);
  }, [list])

  // useCallback: 用于函数的缓存

  
  return (
    <div>
      <h2>{sum()}</h2>
      <h2>{sum()}</h2>
      <h2>{sum()}</h2>
      <h2>{sum1}</h2>
      <h2>{sum1}</h2>
      <h2>{sum1}</h2>
      <h2>{sum2()}</h2>
      <h2>{sum2()}</h2>
      <h2>{sum2()}</h2>
    </div>
  );
};


const App1 = () => {
  const { d, h, m, s } = useCurtDownTime(new Date("2025/1/17 16:05:00"))

  return (
    <div>
      <h2>{d}天{h}小时{m}分钟{s}秒</h2>
    </div>
  )
}

export default App1;
